import { View, Image, Text, Input } from '@tarojs/components';
import { useEffect, useState } from 'react';
import searchIcon from '@/assets/images/home/search.png';
import './index.scss';

export default function ({ searchValue, onChange, placeholder = '搜索您喜欢的产品吧' }) {
  const [value, setValue] = useState('');

  const _onInput = (e) => {
    setValue(e.detail.value);
    onChange(e.detail.value);
  };
  useEffect(() => {
    console.log(searchValue);
    setValue(searchValue);
  }, [searchValue]);

  const _onClear = () => {
    setValue('');
    onChange('');
  };

  return (
    <View className="search-container">
      <View className="search-bar">
        <Image className="search-icon" src={searchIcon} />
        <Input value={value} className="search-text" onInput={_onInput} placeholder={placeholder} />
      </View>
      <Text className="cancel-text" onClick={_onClear}>
        取消
      </Text>
    </View>
  );
}
